import React,{useState,useEffect} from 'react';
import {View,Text} from "@tarojs/components";
import {ListItem} from "./components";
import Taro,{usePullDownRefresh,useReachBottom} from '@tarojs/taro'
import {ListItemInfo} from "./components/ListItem";
import VirtualList from '@tarojs/components/virtual-list';

function ListPage() {

  const [list,setList] = useState([]);

  useEffect(()=>{
    console.log('执行 use effect');
    let tempItemList:[ListItemInfo] = [];
    for (let index = 0;index< 20;index++) {
      tempItemList.push({
        id:index
      })
    }
    setList(tempItemList);
  },[]);
  usePullDownRefresh(()=>{
    Taro.request({
      url:'',
      method:'GET',
      data:{

      },
      header:{

      },
      success:function (result) {
        console.log(result);
      },
      fail:function () {

      }
    });
    let tempItemList:[ListItemInfo] = [];
    for (let index = 0;index< 20;index++) {
      tempItemList.push({
        id:index
      })
    }
    setList(tempItemList);
  });
  useReachBottom(()=>{
    let tempItemList:[ListItemInfo] = [];
    for (let index = 0;index< 20;index++) {
      tempItemList.push({
        id:index + list.length
      })
    }
    setList(list.concat(tempItemList));
  });

  return (
    <View
      id={'view'}
      className={'index'}
    >
      <Text>12345</Text>
      {
        list.map((item)=>ListItem(item))
      }
    </View>
  );
}

export default ListPage;
